<template>
  <div>
    <a-modal
      title="保存"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :wdith="400"
      @ok="handleOk"
      @cancel="cancel"
      ok-text="保存"
      cancel-text="取消"
    >
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="名称">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入名字!' }],
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "SaveModal",
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          setTimeout(() => {
            this.confirmLoading = false;
            this.visible = false;
            this.$emit("saveOk");
          }, 2000);
        }
      });
    },
  },
};
</script>
